<template>
  <el-drawer
    size="680px"
    style="position: absolute;"
    :append-to-body="true"
    :modal-append-to-body="true"
    :modal="true"
    :wrapperClosable="true"
    :withHeader="false"
    direction="rtl"
    :visible.sync="drawer"
  >
    <div class="drawerContent" v-loading="loading">
      <div class="drawerTop">
        <div class="groupAvatar">
          <GroupAvatar :header="groupDetailMsg.groupAvatar" :groupId="groupId" @refreshHearder="refreshHearder"/>
        </div>
        <div class="groupName" v-if="!nameEditor">{{ groupDetailMsg.groupName }}</div>
        <div class="groupName" v-if="nameEditor">
          <el-input v-model="groupDetailMsg.groupName " placeholder="请输入群名" @blur="confirmName" :maxlength="30"
          ></el-input>
        </div>
        <div class="changeGroupName" @click="changeName" v-if="groupDetailMsg.groupType===0">
          <i class="el-icon-edit"></i>
        </div>
      </div>
      <div class="tabs">
        <div v-for="(item,index) in tabs" :key="index" :class="activeIndex===index?'tab_item active':'tab_item' "
             @click="activeIndex=index"
        >
          {{ item.label }}
        </div>
      </div>
      <!--      群成员-->
      <div v-if="activeIndex===0" class="tab_content">
        <!-- 搜索项 -->
        <div class="search_bar">
          <el-form size="small" :inline="true" label-width="68px">
            <el-form-item label="成员">
              <el-input
                style="width: 130px;"
                v-model="sea_form.memberName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="getdataBysearch"
              />
            </el-form-item>
            <el-form-item label="工号">
              <el-input
                style="width: 130px;"
                v-model="sea_form.memberNo"
                placeholder="请输入"
                clearable
                @keyup.enter.native="getdataBysearch"
              />
            </el-form-item>
            <el-form-item label="角色" v-if="groupDetailMsg.groupType==0">
              <el-select
                style="width: 130px;"
                placeholder="请选择"
                v-model="sea_form.userType"
                filterable
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="角色" v-else>
              <el-select
                style="width: 130px;"
                placeholder="请选择"
                v-model="sea_form.userType"
                filterable
              >
                <el-option
                  v-for="item in levelOptionsNoAdmin"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                style="width:130px;"
                placeholder="请选择"
                v-model="sea_form.activateStatus"
                filterable
              >
                <el-option
                  v-for="item in activeStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="search_btns">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getdataBysearch"
              >搜索
              </el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
              >重置
              </el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="dataList">
          <el-table
            :data="groupmemberList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :selectable="row => row.userType!==2"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="成员"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="teacherNum"
              label="工号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="memberLevel"
              label="角色"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.userType===0">成员</span>
                <span v-if="scope.row.userType===1">管理员</span>
                <span v-if="scope.row.userType===2">群主</span>

              </template>
            </el-table-column>
            <el-table-column
              prop="activateStatus"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                <span :class="scope.row.activateStatus==1?'statuOpen':'statuClose'"
                >{{ scope.row.activateStatus == 1 ? '已开通' : '未开通' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="groupmemberFooter">
          <el-button size="mini" v-if="!checkTypeList.includes(1)&&checkTypeList.length!=0" type="primary"
                     @click="setAdmin(1)"
          >设置管理员
          </el-button>
          <el-button size="mini" v-if="!checkTypeList.includes(0)&&checkTypeList.length!=0" type="primary"
                     @click="setAdmin(0)"
          >撤销管理员
          </el-button>
          <el-button size="mini" type="danger" @click="RemoveMember" :disabled="checkTypeList.length==0">移除
          </el-button>
        </div>
      </div>
      <!--      群设置-->
      <div v-if="activeIndex===1" class="tab_content">
        <div class="setContent">
          <div class="setItem">
            <div class="item_title">邀请成员</div>
            <el-radio-group v-model="groupDetailMsg.inviteSettings" @input="SetGroup">
              <div class="optionitem">
                <el-radio :label="1">仅群主和管理员</el-radio>
              </div>
              <div class="optionitem">
                <el-radio :label="2">所有成员</el-radio>
              </div>
            </el-radio-group>
          </div>
          <div class="setItem">
            <div class="item_title">上传文件</div>
            <el-radio-group v-model="groupDetailMsg.uploadSettings" @input="SetGroup">
              <div class="optionitem">
                <el-radio :label="1">仅群主和管理员</el-radio>
              </div>
              <div class="optionitem">
                <el-radio :label="2">所有成员</el-radio>
              </div>
            </el-radio-group>
          </div>
          <div class="setItem_btns" v-if="isGroupowner">
            <el-button size="mini" type="danger" @click="dissolveGroup">解散该群</el-button>
            <el-button size="mini" type="primary" @click="turnGroup">转让该群</el-button>
          </div>
        </div>
      </div>
    </div>

  </el-drawer>

</template>

<script>

import {
  batchMoveUser,
  disbandGroup, editGroup,
  editGroupSettings,
  getGroupDetail, GroupmemberList, setManager
} from '@/api/library_groupList/groupList'
import GroupAvatar from '@/views/library_groupPage/component/GroupAvatar.vue'
import userAvatar from '@/views/system/user/profile/userAvatar.vue'

export default {
  name: 'groupadmin',
  components: { userAvatar, GroupAvatar },
  data() {
    return {
      drawer: false,
      activeName: 'second',
      tabs: [
        {
          label: '群成员',
          id: 1
        },
        {
          label: '群设置',
          id: 2
        }
      ],
      activeIndex: 0,
      isUpdating: false,
      isAdmin: void 0,
      isGroupowner: void 0,
      groupmemberList: [
        {
          id: 1,
          memberName: '张三',
          memberNum: '20230405',
          memberLevel: '群主'
        },
        {
          id: 2,
          memberName: '李四',
          memberNum: '20230405',
          memberLevel: '管理员'
        },
        {
          id: 3,
          memberName: '王五',
          memberNum: '20230405',
          memberLevel: '成员'
        }
      ],
      isInvite: 1,
      isCanfile: 1,
      groupId: '',
      inviteSettings: 1,
      uploadSettings: 1,
      checkdIds: [],
      groupDetailMsg: {},
      loading: false,
      checkTypeList: [],
      nameEditor: false,
      checkUserList: [],
      activeStatusOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已开通',
          value: 1
        },
        {
          label: '未开通',
          value: 0
        }
      ],
      levelOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '群主',
          value: 2
        },
        {
          label: '管理员',
          value: 1
        },
        {
          label: '成员',
          value: 0
        }
      ],
      levelOptionsNoAdmin: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '管理员',
          value: 1
        },
        {
          label: '成员',
          value: 0
        }
      ],
      sea_form: {
        memberName: '',
        memberNo: '',
        userType: '',
        activateStatus: ''
      }
    }
  },
  methods: {

    show(isAdmin, isGroupowner, groupId) {
      this.loading = true
      this.isAdmin = isAdmin
      this.isGroupowner = isGroupowner
      this.drawer = true
      this.groupId = groupId
      this.getGroupDetailMsg()
      this.getGroupMemberList()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    refreshHearder() {
      this.getGroupDetailMsg()
      this.$emit('refreshavatar')
    },
    handleSelectionChange(val) {
      this.checkdIds = val.map(item => item.userId)
      this.checkTypeList = val.map(item => item.userType)
      this.checkUserList = val.map(item => item.nickName)
    },
    getdataBysearch() {
      // 发送获取列表请求
      this.getGroupMemberList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        memberName: '',
        memberNo: '',
        userType: '',
        activateStatus: ''
      }
      this.getdataBysearch()
    },
    // 获取群成员
    async getGroupMemberList() {
      let res = await GroupmemberList({ groupId: this.groupId, ...this.sea_form })
      this.loading = false
      if (res.code == 200) {
        this.groupmemberList = res.data
      }
    },
    // 群设置
    async SetGroup() {
      let obj = {
        groupId: this.groupId,
        inviteSettings: this.groupDetailMsg.inviteSettings,
        uploadSettings: this.groupDetailMsg.uploadSettings
      }
      let res = await editGroupSettings(obj)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '设置成功!'
        })
      }

    },
    // 移除群成员
    async RemoveMember() {
      this.$confirm('确定将选择的成员从群内移除吗？', '移除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await batchMoveUser({
          groupId: this.groupId,
          userIds: this.checkdIds
        })
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '移除成功!'
          })
          this.getGroupMemberList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移除'
        })
      })

    },
    async setAdmin(type) {
      let str = this.checkUserList.length > 1 ? `${this.checkUserList[0]}等${this.checkUserList.length}个用户` : `${this.checkUserList[0]}`
      this.$confirm(`${type == 1 ? `确定将${str}设置为管理员身份吗` : `确定将${str}的管理员身份撤销吗`}`, `${type == 1 ? '添加确认' : '撤销确认'}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await setManager({ groupId: this.groupId, userType: type, userIds: this.checkdIds })
        if (res.code == 200) {
          this.$message.success('设置成功')
          this.getGroupMemberList()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })

    },
    // 群详情
    async getGroupDetailMsg() {
      let res = await getGroupDetail({ groupId: this.groupId })
      if (res.code == 200) {
        this.groupDetailMsg = res.data
      }
    },
    changeName() {
      this.nameEditor = true
    },
    async confirmName() {
      if (this.groupDetailMsg.groupName === '') {
        this.$message.warning('群名不能为空')
        return
      }
      if (this.groupDetailMsg.groupName.length > 30) {
        this.$message.warning('群名不能超过30个字符')
        return
      }
      let res = await editGroup({ groupId: this.groupId, groupName: this.groupDetailMsg.groupName })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.$parent.getGroupList()
      }
      // 调去接口
      this.nameEditor = false
    },
    // 转让
    turnGroup() {
      this.drawer = false
      this.$parent.turnGroup()
    },
    // 解散
    dissolveGroup() {
      this.$confirm(`确定将群组"${this.groupDetailMsg.groupName}"解散吗？`, '解散确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await disbandGroup(this.groupId)
        if (res.code == 200) {
          this.$message.success('解散成功')
          this.drawer = false
          this.$parent.getGroupList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解散'
        })
      })
    }
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-drawer {

  box-shadow: none !important;
  border-left: 1px solid #dddddd;
}

.drawerContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;

  .drawerTop {
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;

    .groupAvatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;

      img {
        width: 40px;
        height: 40px;
        border-radius: 5px;
      }

      margin-right: 10px;

      .changeAvatar {
        background: rgba(0, 0, 0, .2);
        color: #ffffff;
        position: absolute;
        top: 3px;
        left: 0;
        right: 0;
        transform: translateY(50%);
        font-size: 12px;
        text-align: center;
      }
    }

    .groupName {
      font-size: 14px;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    div:last-child {
      font-size: 14px;
      color: #999999;
    }

    .changeGroupName {
      color: #1ab394 !important;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 15px;

    .tab_item {
      font-size: 14px;
      text-align: center;
    }

    .active {
      color: #1ab394;
      border-bottom: 2px solid #1ab394;
    }
  }

  .tab_content {
    width: 100%;
    height: calc(100vh - 122px);
    margin-top: 15px;
    position: relative;

    .search_bar {
      padding: 10px 10px 0 10px;
      background-color: #fafafa;
      margin-bottom: 10px;

      ::v-deep .el-form-item {
        margin-bottom: 10px !important;
      }

      .search_btns {
        margin-left: 20px;
      }
    }

    .dataList {
      height: calc(92% - 131px);
      overflow: auto;

      .statuOpen {
        color: #1ab394;
      }

      .statuClose {
        color: #bfbdbd;
      }
    }

    .groupmemberFooter {
      padding: 0 15px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      position: absolute;
      justify-content: flex-end;
      bottom: 20px;
      left: 0;
      width: 100%;
      height: 32px;
    }

    .setContent {
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;

      .setItem {
        .item_title {
          font-size: 14px;
          margin-top: 15px;
        }

        .optionitem {
          margin-top: 15px;
        }
      }

      .setItem_btns {
        width: calc(100% - 30px);
        position: absolute;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

    }
  }
}
</style>
